<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.min.1.8.1.js"></script>

</head>
<body>
<div id="main" style="width: 1617px;height:400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var file = 0,mem = 0,swap = 0,cpu = 0;
		/* $.post("getSystomInformation",function(data){
			//alert(data);
			if(data.RESULTCODE=="SUCCESS"){
				
			}
		}); */
		
		
		// 指定图表的配置项和数据
		var option = {
				backgroundColor: '#1b1b1b',
				/* tooltip : {
					formatter: "{a} <br/>{c} {b}"
				}, */
				toolbox: {
					show : true,
					feature : {
						mark : {show: false},
						restore : {show: false},
						saveAsImage : {show: true}//保存图片功能
					}
				}, 
				series : [
					{
						name:'CPU',
						type:'gauge',
						min:0,//从0开始
						max:100,//100结束
						splitNumber:10,//等份
						radius: '90%',
						axisLine: {			// 坐标轴线
							lineStyle: {	// 属性lineStyle控制线条样式
								color: [[0.1, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],//表盘区间颜色
								width: 3,
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							}
						},
						axisLabel: {			// 坐标轴小标记
							textStyle: {	// 属性lineStyle控制线条样式
								fontWeight: 'bolder',
								color: '#fff',
								shadowColor : '#fff', //默认透明
								shadowBlur: 10
							}
						},
						axisTick: {			// 坐标轴小标记
							length :15,		// 属性length控制线长
							lineStyle: {	// 属性lineStyle控制线条样式
								color: 'auto',
								shadowColor : '#fff', //默认透明
								shadowBlur: 10
							}
						},
						splitLine: {		   // 分隔线
							length :25,		// 属性length控制线长
							lineStyle: {	// 属性lineStyle（详见lineStyle）控制线条样式
								width:3,
								color: '#fff',
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							}
						},
						pointer: {		// 分隔线
							shadowColor : '#fff',//默认透明
							shadowBlur: 5
						},
						title : {
							textStyle: {	// 其余属性默认使用全局文本样式，详见TEXTSTYLE
								fontWeight: 'bolder',
								fontSize: 20,
								fontStyle: 'italic',
								color: '#fff',
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							}
						},
						detail : {
							backgroundColor: 'rgba(30,144,255,0.8)',
							borderWidth: 1,
							borderColor: '#fff',
							shadowColor : '#fff', //默认透明
							shadowBlur: 5,
							offsetCenter: [0, '50%'],	// x, y，单位px
							textStyle: {	   // 其余属性默认使用全局文本样式，详见TEXTSTYLE
								fontWeight: 'bolder',
								color: '#fff'
							}
						},
						data:[{value: 0, name: 'CPU'}]//后台传过来的参数
					},
					{
						name:'内存',
						type:'gauge',
						center : ['15%', '55%'],	// 默认全局居中
						radius : '60%',
						min:0,
						max:100,
						endAngle:45,
						splitNumber:10,
						axisLine: {			// 坐标轴线
							lineStyle: {	// 属性lineStyle控制线条样式
								color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
								width: 2,
								shadowColor : '#fff', //默认透明
								shadowBlur: 10
							}
						},
						axisLabel: {		// 坐标轴小标记
							textStyle: {	// 属性lineStyle控制线条样式
								fontWeight: 'bolder',
								color: '#fff',
								shadowColor : '#fff', //默认透明
								shadowBlur: 10
							}
						},
						axisTick: {			// 坐标轴小标记
							length :12,		// 属性length控制线长
							lineStyle: {	// 属性lineStyle控制线条样式
								color: 'auto',
								shadowColor : '#fff', //默认透明
								shadowBlur: 10
							}
						},
						splitLine: {		// 分隔线
							length :20,		// 属性length控制线长
							lineStyle: {	// 属性lineStyle（详见lineStyle）控制线条样式
								width:3,
								color: '#fff',
								shadowColor : '#fff', //默认透明
								shadowBlur: 10
							}
						},
						pointer: {
							width:5,
							shadowColor : '#fff', //默认透明
							shadowBlur: 5
						},
						title : {
							offsetCenter: [0, '-30%'],	// x, y，单位px
							textStyle: {	// 其余属性默认使用全局文本样式，详见TEXTSTYLE
								fontWeight: 'bolder',
								fontStyle: 'italic',
								color: '#fff',
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							}
						},
						detail : {
							//backgroundColor: 'rgba(30,144,255,0.8)',
							// borderWidth: 1,
							borderColor: '#fff',
							shadowColor : '#fff',//默认透明
							shadowBlur: 5,
							width: 80,
							height:30,
							offsetCenter: [25, '20%'],	// x, y，单位px
							textStyle: {	// 其余属性默认使用全局文本样式，详见TEXTSTYLE
								fontWeight: 'bolder',
								color: '#fff'
							}
						},
						data:[{value: 0, name: 'memory'}]
					},
					{
						name:'磁盘空间',
						type:'gauge',
						center : ['75%', '50%'],	// 默认全局居中
						radius : '60%',
						min:0,
						max:100,
						startAngle:135,
						endAngle:45,
						splitNumber:2,
						axisLine: {			// 坐标轴线
							lineStyle: {	// 属性lineStyle控制线条样式
								color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
								width: 2,
								shadowColor : '#fff', //默认透明
								shadowBlur: 10
							}
						},
						axisTick: {			// 坐标轴小标记
							length :12,		// 属性length控制线长
							lineStyle: {	// 属性lineStyle控制线条样式
								color: 'auto',
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							}
						},
						axisLabel: {
							textStyle: {	// 属性lineStyle控制线条样式
								fontWeight: 'bolder',
								color: '#fff',
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							},
							formatter:function(v){
								switch (v + '') {
									case '0' : return 'used';
									case '50' : return 'file';
									case '100' : return 'total';
								}
							}
						},
						splitLine: {		// 分隔线
							length :15,		// 属性length控制线长
							lineStyle: {	// 属性lineStyle（详见lineStyle）控制线条样式
								width:3,
								color: '#fff',
								shadowColor : '#fff', //默认透明
								shadowBlur: 10
							}
						},
						pointer: {
							width:2,
							shadowColor : '#fff', //默认透明
							shadowBlur: 5
						},
						title : {
							show: false
						},
						detail : {
							show: false
						},
						data:[{value: 0, name: 'file'}]
					},
					{
						name:'可用空间',
						type:'gauge',
						center : ['75%', '50%'],	// 默认全局居中
						radius : '60%',
						min:0,
						max:100,
						startAngle:315,
						endAngle:225,
						splitNumber:2,
						axisLine: {			// 坐标轴线
							lineStyle: {	// 属性lineStyle控制线条样式
								color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
								width: 2,
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							}
						},
						axisTick: {			// 坐标轴小标记
							show: false
						},
						axisLabel: {
							textStyle: {	// 属性lineStyle控制线条样式
								fontWeight: 'bolder',
								color: '#fff',
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							},
							formatter:function(v){
								switch (v + '') {
									case '0' : return 'used';
									case '50' : return 'swap';
									case '100' : return 'total';
								}
							}
						},
						splitLine: {		// 分隔线
							length :15,		// 属性length控制线长
							lineStyle: {	// 属性lineStyle（详见lineStyle）控制线条样式
								width:3,
								color: '#fff',
								shadowColor : '#fff',//默认透明
								shadowBlur: 10
							}
						},
						pointer: {
							width:2,
							shadowColor : '#fff',//默认透明
							shadowBlur: 5
						},
						title : {
							show: false
						},
						detail : {
							show: false
						},
						data:[{value: 0, name: 'swap'}]
					}
				]
			};

		
		
		function SystomInformation(){
			$.post("getSystomInformation",function(data){
				if(data.RESULTCODE=="SUCCESS"){
					
					option.series[0].data[0].value = data.RESULTDATA.cpu;
					option.series[1].data[0].value = data.RESULTDATA.mem;
					option.series[2].data[0].value = data.RESULTDATA.file;
					option.series[3].data[0].value = data.RESULTDATA.swap;
					
				}else{
					
					option.series[0].data[0].value = 0;
					option.series[1].data[0].value = 0;
					option.series[2].data[0].value = 0;
					option.series[3].data[0].value = 0;
				}
				
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			});
		}
		//setInterval(SystomInformation, 3000);
		
	</script>
</body>
</html>